﻿@{
    ViewBag.Title = "MyReadings";
    Layout = "~/Views/Shared/_LayoutDesktop.cshtml";
}
<script src="@Url.Content("~/Scripts/Readings.js")" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    var jsonReadings;
    $(function () {
       
    });
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(initialize);
      
    // Callback that creates and populates a data table, 
    // instantiates the chart, passes in the data and
    // draws it.
    function initialize() {
        $("#spnLoading").show();
        var userVehicleId = $("#ddlVehicles").val();
        getUserReadings(userVehicleId, function (readings) {
            //alert(readings)
            jsonReadings = readings;
            drawVisualizations();
            $("#spnLoading").hide();
        }, function (status) {
            alert(status);
        });
        
    }
    function drawVisualizations() {
        drawReadingsTable();
        drawReadingsChart();
    }
    function drawReadingsTable() {
        var data = new google.visualization.DataTable(eval(jsonReadings));
        var view = new google.visualization.DataView(data);
        //view.setColumns([11, 2, 3, 4, 8, 9]);
        view.setColumns([VEHICLENAME_COL_INDEX, ODOMETER_COL_INDEX, FUELADDED_COL_INDEX, FUELPRICE_COL_INDEX, FUELEFFICIENCY_COL_INDEX, COSTPERFUELUNIT_COL_INDEX]);  
        drawVisualization('Table', 'divTable', view, null);
    }
    function drawReadingsChart() {
        var data = new google.visualization.DataTable(eval(jsonReadings));
        data.setColumnLabel(FUELEFFICIENCY_COL_INDEX, 'Mileage (MPG)');
        data.setColumnLabel(COSTPERFUELUNIT_COL_INDEX, 'Cost Per Mile $');
        var view = new google.visualization.DataView(data);
        view.setColumns([TIMESTAMP__COL_INDEX, COSTPERFUELUNIT_COL_INDEX, FUELEFFICIENCY_COL_INDEX]); 
        drawVisualization('AnnotatedTimeLine', 'divChart', view, { 'scaleType': 'allfixed', 'scaleColumns': [0, 1], 'wmode': 'opaque', 'colors': ['#0090ff'] });
    }

    function drawVisualization(visualizationType, containerId, data, options) {
        
        var wrapper = new google.visualization.ChartWrapper({
            chartType: visualizationType,
            dataTable: data,
            options:options,
            containerId: containerId
        });
        wrapper.draw();
        
    }

</script>
<h2>Readings for: @Html.DropDownList("ddlVehicles", ViewData["UserVehicles"] as SelectList, new { @type = "text", @id = "ddlVehicles", @onchange = "initialize();" }) </h2>
<span id="spnLoading" style="color:#FF0000;display:none">Getting readings please wait.... </span>
<br />
<div id="divChart" style="height:300px; width:725px">

</div>

<br />
<div style="color:#000000">
<div id="divTable" style="height:200px;width:725px">
</div>
</div>
